<script setup>
import { provide, ref } from 'vue';
// 注册局部组件，只需要导入就可以
import BaseVue2 from './components/BaseVue2.vue'
import NewsPage from './components/NewsPage.vue'
import PayMoney from './components/PayMoney.vue'
// 编程式导航
import { useRouter } from 'vue-router'
// 导入axios
import axios from 'axios'

const money = ref(1000);
// 把money放入缓存
// 参数一：数据的名称，给后面调用时使用
// 参数二：定义好变量，值
provide("myMoney",money);
// 初始化字体大小
const x = ref(20);

// 定义字体放大的函数
function fontBig()
{
    x.value += 2;
}


const router = useRouter();

// 前端网络请求
// 创建网络客户端
const axiosApp = axios.create({
    // url
    baseURL:"/",
    // 网络超时时间，单位是毫秒
    timeout:5000
});

// 请求数据
const stuData = ref();
axiosApp.get("./student.json").then((res) =>{
    // res是请求回来的数据
    stuData.value = res.data;
});


// 后端网络请求
// 创建网络客户端
const axiosAppBack = axios.create({
    // url
    baseURL:"http://172.18.89.253:8080/",
    // 网络超时时间，单位是毫秒
    timeout:5000
});

// 请求数据
const userData = ref();
axiosAppBack.get("/api/getUserList").then((res) =>{
    // res是请求回来的数据
    userData.value = res.data;
});

</script>

<template>
<!--调用全局注册的组件
<BaseVue></BaseVue>
-->
<!--调用局部注册的组件，导入后，直接使用
<BaseVue2></BaseVue2>
-->
<!--可以使用小写加-的方式调用组件，不推荐使用
<base-vue></base-vue>
-->
<div :style="{fontSize:x+'px'}">
<NewsPage title="中国足球冲出亚洲" newContent="中国足球冲出亚洲" @big="fontBig">
这里是插槽的内容
</NewsPage>
</div>
<br>
<h1>跨级组件数据传递：<br></h1>
总余额：{{ money }}
<br>
<PayMoney></PayMoney>

<br>
<h1>路由，当前访问路径：</h1>{{$route.fullPath}}<br>
<!--路由切换，相当于a标签-->
<router-link to="/xinxi">信息学院</router-link><br>
<router-link to="/jianzhu">建筑学院</router-link><br>
<router-link to="/sport">体育新闻</router-link><br>
<router-link to="/edu">教育新闻</router-link><br>

<!--编程式导航-->
<button @click="router.push('/xinxi')">信息学院(编程式导航)</button> <br>
<button @click="router.go(-1)">后退(编程式导航)</button>

<!--编程式导航 路由嵌套-->
<button @click="router.push('/gxy/xinxi/嵌套访问')">信息学院(嵌套)</button> <br>

<!--编程式导航 带参数胡动态路由-->
<button @click="router.push('/gxy/xinxi/动态参数访问abc123/信息与人工智能学院')">信息学院(动态参数)</button> <br>

<!--编程式导航 重定向-->
<button @click="router.push('/home')">主页(重定向)</button> <br>

<!--编程式导航 使用名称访问-->
<button @click="router.push({name:'xinxi',params:{name:'用名称访问的信息学院',id:'xinxi001'}})">信息学院(名称访问)</button> <br>
<!--路由视图，显示被切换的组件内容-->
<router-view></router-view>

<br>
网络请求：<br>
学生信息：
id:{{ stuData.id}} <br>
学号:{{ stuData.xuehao}} <br>
地址:{{ stuData.address}} <br>

后端请求的数据：<br>
<ul>
    <li v-for="user in userData">
       id: {{ user.id }} <br>
       用户名: {{ user.username }} <br>
       年龄: {{ user.age }} <br>
       地址: {{ user.address }} <br>
    </li>
</ul>
</template>

<style scoped>

</style>